<template>
  <div class="flex justify-center p-2 pr-15">
    <div class="flex flex-row">
      <div class="bgm">
        <div class="title2 bg-gradient-to-r from-red-500 via-red-400">{{ title }}</div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
  import { defineComponent } from 'vue';
  const props = {
    title: { type: String, default: '第1章 章节标题' },
    type: { type: String, default: '1' },
  };
  export default defineComponent({
    name: 'ChapterTitle',
    components: {},
    props,
    setup(_, {}) {
    },
  });
</script>

<style scoped>
  .title1 {
    margin: 0;
    padding: 2px 10px;
    max-width: 100%;
    border-left: 5px solid rgb(218, 203, 158);
    border-right: 5px solid rgb(218, 203, 158);
    border-top-color: rgb(218, 203, 158);
    border-bottom-color: rgb(218, 203, 158);
    color: rgb(255, 255, 255);
    background-color: rgb(249, 110, 87);
    overflow-wrap: break-word !important;
  }

  .bgm {
    background: url(/@/assets/images/book.png) no-repeat right bottom;
    padding-bottom: 8px;
    padding-right: 45px;
  }

  .title2 {
    padding: 2px 30px 2px 10px;
    max-width: 100%;
    border-left: 5px solid rgb(218, 203, 158);
    //border-right: 5px solid rgb(218, 203, 158);
    border-top-color: rgb(218, 203, 158);
    border-bottom-color: rgb(218, 203, 158);
    color: rgb(255, 255, 255);
    //background-color: rgba(249, 110, 87, 0.95);
    overflow-wrap: break-word !important;
  }

  .title3 {
    margin: 0;
    padding: 2px 10px;
    max-width: 100%;
    border-left: 5px solid gold;
    border-right: 5px solid gold;
    border-top-color: rgb(218, 203, 158);
    border-bottom-color: rgb(218, 203, 158);
    color: rgb(100, 100, 100);
    background-color: #cc6060;
    border-radius: 15px;
    overflow-wrap: break-word !important;
  }
</style>
